<template>
  <!-- {{ current }} -->
  <ul class="status-bar">
    <li
      class="number"
      v-for="n in count"
      :style="
        n === currentIndex
          ? `font-size: 18px; font-weight: 600; color: #dd5497;`
          : ''
      "
      :key="n"
      @click="setQuestion(n - 1)"
    >
      {{ n }}
    </li>
  </ul>
</template>

<script>
export default {
  name: "StatusBar",
  props: {
    setQuestion: {
      type: Function,
      required: true,
    },
    count: {
      type: Number,
      required: true,
    },
    current: {
      type: Number,
      required: true,
    },
  },
  data: function () {
    return {
      currentIndex: this.current,
    };
  },
  watch: {
    current: function (newV) {
      this.currentIndex = newV;
    },
  },
};
</script>

<style lang="scss" scoped src="./style.scss"></style>
